<template>
  <el-dialog
    :title="title.CN"
    :visible.sync="dialogVisible"
    :modal-append-to-body="false"
    width="50%"
    :before-close="handleClose"
  >
    <el-form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-width="150px">
      <el-form-item label="模块名称" prop="name">
        <el-input v-model="formValidate.name" placeholder="请输入..."></el-input>
      </el-form-item>
      <el-form-item label="path">
        <el-input v-model="formValidate.path" placeholder="请输入..."></el-input>
      </el-form-item>
      <el-form-item label="终端">
        <el-input v-model="client" readonly></el-input>
      </el-form-item>
      <el-form-item
        label="排序顺序"
        prop="position"
        :rules="[
          { required: true, message: '排序顺序不能为空' },
          { type: 'number', message: '排序顺序必须为数字值' }
        ]"
      >
        <el-input type="age" v-model.number="formValidate.position" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="图标" prop="icon" v-if="showIcon == true">
        <i v-if="formValidate.icon" :class="formValidate.icon" style="margin-right: 10px"></i>
        <el-button @click="addIconProps.visible = true">选择图标</el-button>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" @click="handleConfirm('formValidate')">确 定</el-button>
      <el-button type="info" @click="handleClose">取 消</el-button>
    </div>
    <i-add-icon
      :dialog-visible="addIconProps.visible"
      @on-addIconDialog-close="addIconHandleClose"
      @on-addIconDialog-success="addIconHandleSuccess"
    />
  </el-dialog>
</template>

<script>
import Upload from '@/framework/components/upload'
import { save, update, get } from '@/project/service/module'
import IAddIcon from './addIcon'
import emitter from '@/framework/mixins/emitter'
export default {
  mixins: [emitter],
  components: {
    Upload,
    IAddIcon
  },
  data() {
    return {
      dialogVisible: false,
      model: 'module',
      addIconProps: {
        visible: false
      },
      showIcon: false,
      formValidate: {},
      ruleValidate: {
        name: [{ required: true, message: '模块名称不能为空', trigger: 'blur' }],
        path: [{ required: true, message: '模块路径不能为空', trigger: 'blur' }]
      },
      title: {
        CN: '',
        EN: ''
      },

      client: ''
    }
  },
  methods: {
    addIconHandleClose() {
      this.addIconProps.visible = false
    },
    addIconHandleSuccess(icon) {
      this.formValidate.icon = icon
      this.addIconProps.visible = false
    },
    handleClose() {
      this.$refs.formValidate.resetFields()
      this.dialogVisible = false
    },
    initData(data, createOrUpdate, client) {
      this.dialogVisible = true
      this.client = client
      this.title.En = createOrUpdate
      if (createOrUpdate === 'create' || createOrUpdate === 'createChild') {
        this.formValidate = {}
        this.showIcon = true
        if (createOrUpdate === 'create') this.title.CN = '添加模块'
        else {
          this.title.CN = '添加下级模块'
          this.formValidate.id = data.id.toString()
        }
      } else {
        this.get(data.id)
        this.showIcon = true
        this.title.CN = '编辑模块信息'
      }
    },
    handleConfirm(name) {
      this.$nextTick(() => {
        this.$refs[name].validate(valid => {
          if (valid) {
            console.log('this.client',this.client)
            let accountType = ''
            if(this.client === 'MANAGER_WEB') {
              accountType = 'MANAGER'
            } else if(this.client === 'USER_MANAGER_WEB') {
              accountType = 'USER_MANAGER'
            } else if(this.client === 'AGENT_WEB') {
              accountType = 'AGENT'
            }
            let params = {
              name: this.formValidate.name,
              path: this.formValidate.path,
              position: this.formValidate.position,
              type: this.client,
              icon: this.formValidate.icon,
              client: this.client,
              accountType: accountType
            }
            if (this.title.En === 'create' || this.title.En === 'createChild') {
              if (this.formValidate.id) {
                let obj = { id: this.formValidate.id }
                params.parent = obj
              }
              save({ module: params }, res => {
                this.$message.success('添加成功')
                this.handleClose()
                this.$emit('onRefreshData')
              })
            } else {
              params.id = this.formValidate.id
              update({ module: params }, res => {
                this.$message.success('修改成功')
                this.handleClose()
                this.$emit('on-save-success')
              })
            }
            return false
          } else {
            //校验失败
            return false
          }
        })
      })
    },
    get(id) {
      get({ id }, res => {
        this.formValidate = res
      })
    }
  }
}
</script>
